<template>
  <div class="active-list">
    <template>
      <!-- 查询条件 -->
      <el-form :inline="true">
        <el-form-item label="选择油站：" v-if="userInfo.company">
          <el-select
            v-model="gasId"
            filterable
            placeholder="请选择油站"
            @change="changeStation"
            style="width: 250px">
            <el-option v-for="item in options" :key="item.gasId" :value="item.gasId" :label="item.gasName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-radio-group @change="changeStateSearch" v-model="gasStatus" size="middle">
            <el-radio-button :label="10">进行中</el-radio-button>
            <el-radio-button :label="20">已结束</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <!-- 列表 -->
      <div class="g-flex-sb-start" :style="listWrap" v-if="hasData">
        <div class="item-list" v-for="item in activeTypes" :key="item">

          <template v-if="item === 1">
            <div class="list-item list-bg1">召唤周边司机</div>
            <div :class="{'autoScroll': gasStatus === 20}" @scroll="onScroll($event, 'aroundDriver', item)">
              <card v-for="item in aroundDriver.data" :key="item.id" :data="item" @click="showDetail('callDriver', item.id, 1)"></card>
              <noList v-if="!aroundDriver.data.length"></noList>
              <div class="tips-wrap">
                <i class="el-icon-loading" v-if="aroundDriver.loading"></i>
                <span v-if="aroundDriver.noMore && gasStatus === 20 && aroundDriver.data.length" class="noMore">没有更多了</span>
              </div>
            </div>
          </template>

          <template v-if="item === 2">
            <div class="list-item list-bg2">召回流失司机</div>
            <div :class="{'autoScroll': gasStatus === 20}" @scroll="onScroll($event, 'outFlowDriver', item)">
              <card v-for="item in outFlowDriver.data" :key="item.id" :data="item" @click="showDetail('callDriver', item.id, 2)"></card>
              <noList v-if="!outFlowDriver.data.length"></noList>
              <div class="tips-wrap">
                <i class="el-icon-loading" v-if="outFlowDriver.loading"></i>
                <span v-if="outFlowDriver.noMore && gasStatus === 20 && outFlowDriver.data.length" class="noMore">没有更多了</span>
              </div>
            </div>
          </template>

          <template v-if="item === 3">
            <div class="list-item list-bg3">店铺领劵</div>
            <div :class="{'autoScroll': gasStatus === 20}" @scroll="onScroll($event, 'shopGetCoupon', item)">
              <card v-for="item in shopGetCoupon.data" :key="item.id" :data="item" @click="showDetail('callDriver', item.id, 3)"></card>
              <noList v-if="!shopGetCoupon.data.length"></noList>
              <div class="tips-wrap">
                <i class="el-icon-loading" v-if="shopGetCoupon.loading"></i>
                <span v-if="shopGetCoupon.noMore && gasStatus === 20 && shopGetCoupon.data.length" class="noMore">没有更多了</span>
              </div>
            </div>
          </template>

          <template v-if="item === 4">
            <div class="list-item list-bg4">油站排序</div>
            <div :class="{'autoScroll': gasStatus === 20}" @scroll="onScroll($event, 'stationOrder', item)">
              <card v-for="item in stationOrder.data" :key="item.id" :data="item" @click="showDetail('stationOrder', item.id, 4, item.customLocation, item.activeStatus)"></card>
              <noList v-if="!stationOrder.data.length"></noList>
              <div class="tips-wrap">
                <i class="el-icon-loading" v-if="stationOrder.loading"></i>
                <span v-if="stationOrder.noMore && gasStatus === 20 && stationOrder.data.length" class="noMore">没有更多了</span>
              </div>
            </div>
          </template>

          <template v-if="item === 5">
            <div class="list-item list-bg5">会员关怀</div>
            <div :class="{'autoScroll': gasStatus === 20}" @scroll="onScroll($event, 'memberCare', item)">
              <card v-for="item in memberCare.data" :key="item.id" :data="item" @click="showDetail('callDriver', item.id, 5, item.customLocation)"></card>
              <noList v-if="!memberCare.data.length"></noList>
              <div class="tips-wrap">
                <i class="el-icon-loading" v-if="memberCare.loading"></i>
                <span v-if="memberCare.noMore && gasStatus === 20 && memberCare.data.length" class="noMore">没有更多了</span>
              </div>
            </div>
          </template>

          <template v-if="item === 6">
            <div class="list-item list-bg6">站长喊话</div>
            <div :class="{'autoScroll': gasStatus === 20}" @scroll="onScroll($event, 'masterShouts', item)">
              <card v-for="item in masterShouts.data" :key="item.id" :data="item" @click="showDetail('masterShouts', item.id, 6, item.customLocation)"></card>
              <noList v-if="!masterShouts.data.length"></noList>
              <div class="tips-wrap">
                <i class="el-icon-loading" v-if="masterShouts.loading"></i>
                <span v-if="masterShouts.noMore && gasStatus === 20 && masterShouts.data.length" class="noMore">没有更多了</span>
              </div>
            </div>
          </template>

          <template v-if="item === 7">
            <div class="list-item list-bg7">天天特价</div>
            <div :class="{'autoScroll': gasStatus === 20}" @scroll="onScroll($event, 'specialPrice', item)">
              <card v-for="item in specialPrice.data" :key="item.id" :data="item" @click="showDetail('specialPrice', item.id, 7, item.customLocation)"></card>
              <noList v-if="!specialPrice.data.length"></noList>
              <div class="tips-wrap">
                <i class="el-icon-loading" v-if="specialPrice.loading"></i>
                <span v-if="specialPrice.noMore && gasStatus === 20 && specialPrice.data.length" class="noMore">没有更多了</span>
              </div>
            </div>
          </template>

        </div>
      </div>
    </template>

    <!-- 右侧详情面板 -->
    <el-drawer
      :visible.sync="drawer"
      :with-header="false"
      size="45%">

      <div class="drawer-wrap">
        <div class="title">
          <span>活动详情</span>
        </div>

        <!-- 分割线 -->
        <el-divider></el-divider>

        <!-- 油站排序详情 -->
        <stationOrder :id="activeId" :show="drawer" :detailType="detailType" :customLocation="customLocation" :gasId="gasId" :activeStatus="activeStatus" v-if="showDetailType === 'stationOrder'"></stationOrder>

        <!-- 召唤司机、店铺领劵、会员关怀详情 -->
        <callDriver :id="activeId" :show="drawer" :detailType="detailType" v-if="showDetailType === 'callDriver'"></callDriver>

        <!-- 站长喊话 -->
        <master-shouts :id="activeId" :show="drawer" :detailType="detailType" :gasId="gasId" v-if="showDetailType === 'masterShouts'"></master-shouts>

        <!-- 天天特价 -->
        <special-price :id="activeId" :show="drawer" :detailType="detailType" v-if="showDetailType === 'specialPrice'"></special-price>

      </div>
    </el-drawer>

    <!-- 显示无数据页面 -->
    <noData v-if="!hasData" :haveInterest="haveInterest" :showButton="showButton"></noData>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getQueryGasList, beforeActiveList, getActiveList, showButton } from '@/api/marketShop'
import * as marketList from './components/marketList'

/**
 * 活动类型，对应数字映射
 * 每增加一个活动，需要在这里配置
 */
const mapData = {
  1: 'aroundDriver', // 周边司机
  2: 'outFlowDriver', // 流失司机
  3: 'shopGetCoupon', // 店铺领劵
  4: 'stationOrder',  // 油站排序
  5: 'memberCare',  // 员工关怀
  6: 'masterShouts',  // 站长喊话
  7: 'specialPrice', // 天天特价
}

export default {
  name: 'marketList',
  components: {
    ...marketList
  },
  data () {
    // 设置活动数据
    let colData = {}
    Object.values(mapData).map(item => {
      colData[item] = {
        data: [],
        loading: false,
        noMore: false,
        pageIndex: 1,
        totalRow: 0
      }
    })
    return {
      ...colData,
      gasId: '',
      showButton: true,
      gasStatus: null, // 10：进行中 20: 已结束
      options: [],
      drawer: false, // 是否显示详情
      showDetailType: '', // 显示详情类型，召唤司机或油站排序
      hasData: true,
      activeTypes: [], // 显示的活动类型
      haveInterest: false, // 是否有权益
      activeId: null,
      detailType: null,
      customLocation: null,
      activeStatus: null, // 活动状态
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    listWrap () {
      return {
        width: `${this.activeTypes.length * 320}px`,
        paddingRight: '30px'
      }
    }
  },
  provide () {
    return {
      resetData: this.resetData,
      getListData: this.getListData
    }
  },
  methods: {
    // 查询油站
    async searchStation () {
      try {
        const { code, result } = await getQueryGasList()
        if (code !== 200 ) return
        this.options = result
      } catch (error) {
        console.log(error)
      }
    },
    // 根据油站ID查询活动状态和顺序，以及是否购买过套餐包
    async beforeActiveList (gasId) {
      try {
        const {code, result: {activeTypes, activityStatusClassify, displayActiveList, haveInterest}} = await beforeActiveList({ gasId })
        if (code !== 200) return
        if (!displayActiveList) {
          this.haveInterest = haveInterest
          this.hasData = false
          return
        } else {
          this.hasData = true
        }
        this.gasStatus = activityStatusClassify
        this.activeTypes = activeTypes
        this.activeTypes.map(item => this.getListData(item))
      } catch (error) {
        console.log(error)
      }
    },
    // 查询某活动类型的列表
    async getListData (activeType) {
      const pageOptions = {
        pageIndex: this[mapData[activeType]].pageIndex,
        pageSize: this.gasStatus === 10 ? 100 : 20
      }
      const params = {
        gasId: this.gasId,
        activeType,
        activeStatusClassify: this.gasStatus,
        ...pageOptions
      }
      try {
        const {result, code, totalRow} = await getActiveList(params)
        if (code !== 200) return
        let currentActive = this[mapData[activeType]]
        currentActive.data.push(...result)
        currentActive.totalRow = totalRow
        // 如果数据量大于等于总数，需设置noMore = true 不可加载
        if (currentActive.data.length >= totalRow) currentActive.noMore = true
      } catch (error) {
        console.log(error)
      }
    },
    // 切换油站
    changeStation (gasId) {
      this.resetData()
      this.beforeActiveList(gasId)
    },
    // 切换状态
    changeStateSearch () {
      this.resetData()
      this.activeTypes.map(item => this.getListData(item))
    },
    /**
     * @description 初始化数据
     * @param {oneData} Number 初始化某一项数据,如果不传则格式化所有数据
     */
    resetData (oneData) {
      if (oneData) {
        this[mapData[oneData]] = {
          data: [],
          loading: false,
          noMore: false,
          pageIndex: 1
        }
        return
      }
      Object.values(mapData).map(item => {
        this[item] = {
          data: [],
          loading: false,
          noMore: false,
          pageIndex: 1
        }
      })
    },
    async onScroll (e, name, activeType) {
      if ((Number(e.target.clientHeight) + Number(e.target.scrollTop) + 10) > e.target.scrollHeight && !this[name].loading && !this[name].noMore) {
        this[name].loading = true
        this[name].pageIndex++
        await this.getListData(activeType)
        this[name].loading = false
      }
    },
    async showButtonApi () {
      try {
        const { code, result } = await showButton()
        if(code !== 200) return
        this.showButton = result
      } catch (e) {
        console.log(e)
      }
    },
    // 弹出详情面板
    showDetail (type, activeId, detailType, customLocation = null, activeStatus) {
      this.drawer = true
      this.activeId = activeId
      this.showDetailType = type
      this.detailType = detailType || null
      this.customLocation = customLocation
      this.activeStatus = activeStatus
    }
  },
  async created () {
    // company = true为商户角色，默认显示第一个油站信息，false为油站角色，显示当前油站信息
    // 先查询活动状态和顺序，再查询列表
    await this.searchStation()
    this.showButtonApi()
    if (this.$route.query.gasId) {
      this.beforeActiveList(this.$route.query.gasId)
      this.gasId = this.$route.query.gasId
    } else if (!this.userInfo.company) {
      this.beforeActiveList(this.userInfo.gasId)
      this.gasId = this.userInfo.gasId
    } else {
      if (this.options.length > 0) {
        this.beforeActiveList(this.options[0].gasId)
        this.gasId = this.options[0].gasId
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .active-list {
    padding: 20px;
    height: 100%;
    .item-list {
      width: 300px;
      &:last-child {
        margin-right: 0;
      }
      .list-item {
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        font-weight: 500;
        color: #fff;
        text-align: center;
        border-radius: 4px;
      }
      .list-bg1 {
        background: linear-gradient(225deg, #81A5FF 0%, #4B7EFE 100%);
      }
      .list-bg2 {
        background: linear-gradient(225deg, #B7C5DC 0%, #8394B3 100%);
      }
      .list-bg3 {
        background: linear-gradient(225deg, #B3B2DA 0%, #7578B4 100%);
      }
      .list-bg4 {
        background: linear-gradient(225deg, #ECD39E 0%, #D6A75B 100%);
      }
      .list-bg5 {
        background: linear-gradient(225deg, #ECD39E 0%, #D6A75B 100%);
      }
      .list-bg6 {
        background: linear-gradient(270deg, #97A0BF 0%, #596484 100%);
      }
      .list-bg7 {
        background: linear-gradient(45deg, #CD7153 0%, #EAAB8D 100%);
      }
    }
    .autoScroll {
      height: 73vh;
      overflow-y: auto;
      // 隐藏滚动条
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE 10+ */
      &::-webkit-scrollbar { /* Chrome Safari */
        width: 0;
      }
      .tips-wrap {
        display: flex;
        justify-content: center;
        margin: 15px 0;
        .noMore {
          font-size: 13px;
          color: #aaa;
        }
      }
    }
    .drawer-wrap {
      height: 100vh;
      overflow-y: auto;
      font-size: 14px;
      padding: 20px;
      .title {
        font-weight: 600;
        color: #222222;
      }
    }
  }
</style>